import {
  ModalForm,
  ProFormDigit,
  ProFormSelect,
  ProFormSwitch,
  ProFormText,
} from '@ant-design/pro-form';
import { FC } from 'react';

type CreateFormProps = {
  createModalVisible: boolean;
  handleCreateModalVisible: any;
  handleCreate: (values: ADMIN.Menu) => void;
};

const CreateForm: FC<CreateFormProps> = (props) => {
  const { handleCreate, createModalVisible, handleCreateModalVisible } = props;

  return (
    <ModalForm<ADMIN.Menu>
      title="新建菜单"
      width="500px"
      visible={createModalVisible}
      onVisibleChange={handleCreateModalVisible}
      onFinish={async (value) => {
        handleCreate(value);
      }}
    >
      <ProFormSelect
        name="pid"
        label="父菜单"
        rules={[{ required: true, message: '请选择父菜单' }]}
        placeholder="请选择父菜单"
        options={['0', '1', '2']}
      />
      <ProFormText
        name="name"
        label="名称"
        rules={[{ required: true, message: '请输入名称' }]}
        placeholder="请输入名称"
      />
      <ProFormText
        name="route"
        label="路由"
        rules={[{ required: true, message: '请输入路由' }]}
        placeholder="请输入路由"
      />
      <ProFormText
        name="icon"
        label="图标"
        rules={[{ required: true, message: '请输入图标' }]}
        placeholder="请输入图标"
      />
      <ProFormDigit
        label="排序"
        name="sort"
        min={0}
        max={100000}
        width="sm"
        placeholder="请输入排序(越大越靠前)"
      />

      <ProFormSwitch name="display" label="是否显示" initialValue={true} />
    </ModalForm>
  );
};

export default CreateForm;
